<template>
  <div class="mui-pages">
    <header class="mui-bar mui-bar-nav">
      <div class="header-common-title flex-justify-start">
        <a @click="fn.goHome()" href="javascript:void(0)"
          ><img class="back-btn" src="../../../../static/images/back.png"
        /></a>
        <div class="header-search flex-center">支部党费统计</div>
      </div>
    </header>
    <div class="mui-page-content">
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll paddingBottom">
          <div class="statistics-header">
            <h4>{{ partyGroupName }}</h4>
            <div class="time-line flex-center">
              <div class="message-line"></div>
              <div
                @click="showTimePicker()"
                id="recordYyear"
                class="year-btn flex-center"
              >
                <span id="recordTimes">{{ year }}</span>
                <img
                  class="arrow_icon"
                  src="../../../../static/images/select_down.png"
                />
              </div>
              <div class="message-line"></div>
            </div>
            <div class="flex-center">
              <div class="flex-center work-message-item-tab">
                <div class="flex-column flex-center">
                  <p>支部应收党费</p>
                  <p class="work-red">￥{{ data.shouldPay }}</p>
                </div>
              </div>
              <div class="flex-center work-message-item-tab">
                <div class="flex-column flex-center">
                  <p>支部实收党费</p>
                  <p class="work-blue">￥{{ data.realPay }}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="record-member-lists">
            <div class="flex-between-center work-message-lists">
              <ul class="flex-justify-start sign-lists">
                <li
                  @click="switchTabIndex(1)"
                  :class="{ 'sign-active': tabIndex == 1 }"
                  class=""
                >
                  支部党费缴纳情况
                </li>
                <li
                  v-if="show()"
                  @click="switchTabIndex(2)"
                  :class="{ 'sign-active': tabIndex == 2 }"
                  class=""
                >
                  支部党费缴纳明细
                </li>
              </ul>
            </div>
            <div
              v-if="tabIndex == 1"
              class="sign-lists-tabs"
              style="display: block"
            >
              <div class="mui-table-view organization-lists">
                <div class="mui-table-view organization-lists">
                  <div class="mui-table-view organization-lists pay-scroll">
                    <cube-scroll
                      ref="scroll"
                      :options="options"
                      @pulling-up="onPullingUp"
                    >
                      <cube-swipe>
                        <transition-group name="swipe" tag="div">
                          <div
                            class="mui-table-view-cell"
                            v-for="(data, index) in swipeData"
                            :key="data.partyMemberId"
                          >
                            <div>
                              <li
                                class="mui-table-view-cell flex-between-center"
                              >
                                <h2 class="organization-lists-title">
                                  {{ data.partyMemberName }}
                                </h2>
                                <p v-if="data.status === '1'">已缴费</p>
                                <p
                                  v-if="data.status === '0'"
                                  class="mine-lists-money"
                                >
                                  未缴费
                                </p>
                              </li>
                            </div>
                          </div>
                        </transition-group>
                      </cube-swipe>
                      <!-- <div class="text-center no-data" v-if="swipeData.length===0">
                        <img src="../../../../static/images/no_data.png" alt="">
                        <p>暂无数据</p>
                      </div> -->
                      <!-- W noData -->
                      <noData v-if="swipeData.length === 0"></noData>
                      <onBottom v-else-if="onBottom"></onBottom>
                    </cube-scroll>
                  </div>
                </div>
              </div>
            </div>
            <div
              v-if="tabIndex == 2"
              class="sign-lists-tabs"
              style="display: block"
            >
              <div class="mui-table-view organization-lists">
                <div class="mui-table-view organization-lists">
                  <div class="mui-table-view organization-lists pay-scroll">
                    <cube-scroll
                      ref="scroll"
                      :options="options"
                      @pulling-up="onPullingUp"
                    >
                      <cube-swipe>
                        <transition-group name="swipe" tag="div">
                          <div
                            class="mui-table-view-cell"
                            v-for="(data, index) in swipeData"
                            :key="data.partyMemberId"
                          >
                            <li class="mui-table-view-cell flex-between-center">
                              <div class="mine-lists-content">
                                <h2 class="organization-lists-title">
                                  {{ data.partyMemberName }}
                                </h2>
                                <div class="mine-lists-tips flex-justify-start">
                                  应缴党费：
                                  <p class="organization-lists-title">
                                    ￥{{ data.shouldPay }}
                                  </p>
                                  ，实缴党费：
                                  <p class="organization-lists-title">
                                    ￥{{ data.realPay }}
                                  </p>
                                </div>
                              </div>
                              <p v-if="data.status === '1'">已缴费</p>
                              <p
                                v-if="data.status === '0'"
                                class="mine-lists-money"
                              >
                                未缴费
                              </p>
                            </li>
                          </div>
                        </transition-group>
                      </cube-swipe>
                      <!-- <div
                        class="text-center no-data"
                        v-if="swipeData.length === 0"
                      >
                        <img
                          src="../../../../static/images/no_data.png"
                          alt=""
                        />
                        <p>暂无数据</p>
                      </div> -->
                      <!-- W noData -->
                      <noData v-if="swipeData.length === 0"></noData>
                      <onBottom v-else-if="onBottom"></onBottom>
                    </cube-scroll>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部tabbar    start -->
    <paymentFooterbar></paymentFooterbar>
  </div>
</template>

<script>
import paymentFooterbar from "../common/paymentFooterbar.vue";
import tools from "@/utils/tools";
import loginService from "@/service/loginService";
import moment from "moment";
export default {
  components: {
    paymentFooterbar,
  },
  name: "branch",
  data() {
    return {
      fn: tools,
      options: {
        pullUpLoad: true,
        scrollbar: false,
      },
      onBottom: false, // W onBottom
      objectsName: "",
      swipeData: [],
      infinite: true,
      pageIndex: 0,
      pageSize: 20,
      isLoading: false,
      year: "",
      _time: "",
      data: {},
      tabIndex: 1,
      currentTabIndex: 1,
      partyGroupName: "",
    };
  },
  created() {
    this._time =
      this.$store.state._time || new Date(new Date().getFullYear(), 1, 1);
    this.year = moment(this._time).format("YYYY年MM月");
    this.loadData();
  },
  methods: {
    loadData() {
      let userInfo = this.$store.state.userInfo || {};
      this.partyGroupName = userInfo.partyMemberModel.partyGroupName;
      let yearMonth = moment(this._time).format("YYYY-MM");
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        partyGroupId: userInfo.partyMemberModel.partyGroupId,
        payStatus: this.payStatus,
        yearMonth: yearMonth,
      };
      loginService
        .getPartyChargeReportByMonthAndPartyGroup(data)
        .then((res) => {
          if (
            res.code === 200 &&
            res.data.partyChargeUserPayStatusList.length < 1
          ) {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
            return tools.tip("已无更多数据");
          }
          this.pageIndex++;
          this.data = res.data;
          this.swipeData = this.swipeData.concat(
            res.data.partyChargeUserPayStatusList
          );
          // 把当前用户排在第一位
          if (this.pageIndex === 1) {
            this.swipeData.map((item, index) => {
              if (
                item.partyMemberId === userInfo.partyMemberModel.id &&
                index !== 0
              ) {
                let tempOption = this.swipeData[0];
                this.$set(this.swipeData, 0, item);
                this.$set(this.swipeData, index, tempOption);
              }
            });
          }
          setTimeout(() => {
            this.$refs.scroll.forceUpdate &&
              this.$refs.scroll.forceUpdate(true, false);
            this.options.isPullUpLoad = false;
          }, 100);
        });
    },
    showTimePicker() {
      let me = this;
      if (!this.datePicker) {
        let nowYear = new Date().getFullYear();
        this.datePicker = this.$createDatePicker({
          columnCount: 2,
          min: new Date(nowYear - 10, 1, 1),
          max: new Date(nowYear + 1, 1, 1),
          value: new Date(nowYear, 1, 1),
          onSelect: (selectedTime, selectedText, formatedTime) => {
            this.year = moment(selectedTime).format("YYYY年MM月");
            this.$store.state._time = this._time = selectedTime;
            this.reloadData();
          },
        });
      }
      this.datePicker.show();
      setTimeout(() => {
        this.datePicker.$updateProps({
          value: me._time,
        });
      }, 100);
    },
    switchTabIndex(tableIndex) {
      this.tabIndex = tableIndex;
      console.log("tableIndex=", tableIndex);
      if (tableIndex !== this.currentTabIndex) {
        this.currentTabIndex = tableIndex;
        this.data = {};
        this.swipeData = [];
        this.pageIndex = 0;
        this.loadData();
      }
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.loadData();
    },
    reloadData() {
      this.data = {};
      this.swipeData = [];
      this.pageIndex = 0;
      this.loadData();
    },
    show() {
      if (this.$localStorage.get("roleType")) {
        let roleType = this.$localStorage.get("roleType");
        if (this.fn.hasRoleType(roleType)) {
          return true;
        }
      }
      return false;
    },
  },
};
</script>

<style scoped>
.pay-scroll {
  height: calc(100vh - 330px);
}
</style>
